@import './styles.scss';

.menu {
  display: flex;
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 5px;
  background: #4D4D4D url('images/header_background.png');
  box-shadow:  0 0 4px 2px rgba(0,0,0,.4);
  color: white;

  a.name {
    height: 100%;
    line-height: 40px;

    img {

    }
  }

  .beta-wrapper {
    margin-left: $margin/2;

    .beta {
      text-transform: uppercase;
      background: $yellow;
      color: $black;
      border-radius: $border-radius;
      padding: 2px 5px;
      font-size: $font-size-small;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .buttons {
    flex: 1;
    text-align: right;
    height: 100%;

    .info {
      height: 100%;
      color: $white;
      background: none;
      border: none;
      padding: $margin/2 $margin;
      margin-right: -$margin;
      font-size: $font-size;
      cursor: pointer;

      &:hover,
      &:focus {
        background: rgba(255,255,255, 0.2);
      }
    }
  }
}

.beta-content {
  .react-tooltip-lite {
    box-shadow:  0 0 4px 2px rgba(0,0,0,.1);

    .beta-content-wrapper {
      width: 400px;
      margin-left: $margin;

      a {
        color: $red;

        &:hover,
        &:focus {
          color: lighten($red, 10%);
        }
      }
    }
  }
}
